<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/blog.css" />
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/bootstrapValidator.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/blog.css" />
		<script src="../../js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/bootstrapValidator.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>

		<div class="container">
			<div class="row">
				<div class="col-sm-8 blog-main">
					<div class="blog-post">
						<div class="blog-post-title">
							<a class="m-title" href="comment.html">blog标题</a>
						</div>
						<p class="blog-post-meta">2016/10/2</p>
						<hr />
						<p>
							his blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported
						</p>

						<div>
							<a class="m-info" href="#">评论：2</a>
							<span class="sep">·</span>
							<a class="m-info" href="#">热度：154</a>
						</div>
					</div>
					<nav>
						<ul class="pager">
							<li class="previous">
								<a href="#">&larr; 上一篇</a>
							</li>
							<li class="next">
								<a href="#">下一篇 &rarr;</a>
							</li>
						</ul>
					</nav>
					<hr />
					<p class="m-info">评论(2)</p>

					<ul class="media-list">
						<li class="media">
							<a class="media-left" href="#">
								<img src="../../img/face/f (3).jpg" height="50" width="50">
							</a>
							<div class="media-body" style="width: 1000px;">
								<h4 class="media-heading">名称3</h4>
								<a class="m-info">2016-10-3 09:43:08</a>
								<p>这里是评论内容Cras sit amet nibh libero,</p>
							</div>
							<div class="media-left">
								<a href="javascript:void(0);" onclick="reply(this)" style="display:block;width: 40px;">回复</a>
							</div>
						</li>
					</ul>
					<ul class="media-list" style="margin-left: 50px;">
						<li class="media">
							<a class="media-left" href="#">
								<img src="../../img/face/f (3).jpg" height="50" width="50">
							</a>
							<div class="media-body" style="width: 1000px;">
								<h4 class="media-heading">名称3</h4>
								<a class="m-info">2016-10-3 09:43:08</a>
								<p>这里是评论内容Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
							</div>
							<div class="media-right">
								<a href="javascript:void(0);" onclick="reply(this)" style="width: 50px;">回复</a>
							</div>
						</li>
					</ul>
				
					<hr />
					<div class="m-info ">
						<label id="addcommont ">添加评论</label>
						<a hidden="hidden " style="float: right; " id="cancelreply " onclick="cancelreply(this) " href="javascript:void(0); ">取消回复</a>
					</div>

					<form action=" " method="post " id="comment ">

						<div class="row ">
							<div class="col-sm-8 ">
								<div>
									<textarea class="form-control " rows="6 " name="textarea " placeholder="想说些什么？试试用ctrl+enter提交吧 "></textarea>
								</div>
							</div>
							<div class="col-sm-4 ">
								<div class="input-group " style="margin-bottom: 13px; ">
									<label class="input-group-addon ">呢称</label>
									<input type="text " class="form-control " name="username " />
								</div>
								<div class="input-group " style="margin-bottom: 13px; ">
									<label class="input-group-addon ">邮箱</label>
									<input type="email " class="form-control " name="email " />
								</div>
								<input type="submit " class="m-submit form-control " value="提交评论 " />
							</div>
						</div>
					</form>

				</div>
			</div>

		</div>

		<script type="text/javascript ">
			function reply(e) {
				var name = $(e).parent(".media-right ").prev().children(".media-heading ").text();
				$("#addcommont ").text("回复 " + name + "的评论 ");
				$("#cancelreply ").show();
			}

			function cancelreply(e) {
				$("#addcommont ").text("添加评论 ");
				$("#cancelreply ").hide();
			}

			$(document).ready(function() {
				$("#comment ").bootstrapValidator({
					live: "disabled ",
					fields: {
						textarea: {
							validators: {
								notEmpty: {
									message: '评论不能为空'
								}
							}
						},
						username: {
							validators: {
								notEmpty: {
									message: '呢称不能为空'
								},
								stringLength: {
									min: 1,
									max: 30,
									message: "名称长度必须为1-30个字符之间 "
								}
							}
						},
						email: {
							validators: {
								emailAddress: {
									message: "请输入有效的邮箱地址 "
								}
							}
						}
					}
				});

			});
		</script>

	</body>

</html>